<template>
  <div class="points-record-detail">
    <sticky-top>
      <div class="title">
        <span>积分记录详情</span>
        <span class="back" @click="back">
          <i class="iconfont icon-fanhui"></i> 返回
        </span>
        <el-divider></el-divider>
      </div>
    </sticky-top>

    <div class="container">
      <div class="wrap">
        <el-row>
          <el-col :lg="16" :md="20" :sm="24" :xs="24">
            <!-- 用户基本信息 -->
            <el-card class="user-info-card" v-if="userInfo">
              <div slot="header" class="card-header">
                <span>用户信息</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="info-item">
                    <label>用户ID:</label>
                    <span>{{ userInfo.id }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <label>用户名:</label>
                    <span>{{ userInfo.username }}</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="info-item">
                    <label>昵称:</label>
                    <span>{{ userInfo.nickname }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-card>

            <!-- 积分统计 -->
            <el-card class="points-stats-card" v-if="pointsStats">
              <div slot="header" class="card-header">
                <span>积分统计</span>
              </div>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="stats-item">
                    <div class="stats-number current">{{ pointsStats.currentPoints }}</div>
                    <div class="stats-label">当前积分</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stats-item">
                    <div class="stats-number earned">{{ pointsStats.totalEarned }}</div>
                    <div class="stats-label">累计获得</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="stats-item">
                    <div class="stats-number used">{{ pointsStats.totalUsed }}</div>
                    <div class="stats-label">累计使用</div>
                  </div>
                </el-col>

              </el-row>
            </el-card>

            <!-- 积分记录列表 -->
            <el-card class="points-records-card">
              <div slot="header" class="card-header">
                <span>积分记录</span>
                <div class="header-actions">
                  <el-select v-model="filterType" placeholder="选择类型" clearable style="width: 120px; margin-right: 10px;">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="获得" value="earned"></el-option>
                    <el-option label="使用" value="used"></el-option>
                    <el-option label="过期" value="expired"></el-option>
                    <el-option label="调整" value="adjusted"></el-option>
                  </el-select>
                  <el-select v-model="filterSource" placeholder="选择来源" clearable style="width: 120px; margin-right: 10px;">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="购买" value="purchase"></el-option>
                    <el-option label="签到" value="signin"></el-option>
                    <el-option label="活动" value="activity"></el-option>
                    <el-option label="兑换" value="exchange"></el-option>
                    <el-option label="管理员调整" value="admin"></el-option>
                  </el-select>
                  <el-button type="primary" @click="refreshRecords">刷新</el-button>
                </div>
              </div>

              <el-table :data="filteredRecords" v-loading="loading" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="type" label="类型" width="100">
                  <template slot-scope="scope">
                    <el-tag :type="getTypeTagType(scope.row.type)">
                      {{ getTypeLabel(scope.row.type) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="points" label="积分" width="120">
                  <template slot-scope="scope">
                    <span :class="getPointsClass(scope.row.type)">
                      {{ scope.row.type === 'used' ? '-' : '+' }}{{ scope.row.points }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" min-width="150"></el-table-column>
                <el-table-column prop="description" label="描述" min-width="200"></el-table-column>
                <el-table-column prop="source" label="来源" width="120">
                  <template slot-scope="scope">
                    <el-tag size="mini" type="info">{{ getSourceLabel(scope.row.source) }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="balanceBefore" label="变动前" width="100">
                  <template slot-scope="scope">
                    <span class="balance-before">{{ scope.row.balanceBefore }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="balanceAfter" label="变动后" width="100">
                  <template slot-scope="scope">
                    <span class="balance-after">{{ scope.row.balanceAfter }}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="createTime" label="创建时间" width="160">
                  <template slot-scope="scope">
                    {{ formatDate(scope.row.createTime) }}
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <div class="pagination-container">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pagination.current"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pagination.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pagination.total">
                </el-pagination>
              </div>
            </el-card>


          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import StickyTop from '@/component/base/sticky-top/sticky-top'

export default {
  name: 'PointsRecordDetail',
  components: { StickyTop },
  props: {
    userId: {
      type: [String, Number],
      default: null,
    },
  },
  data() {
    return {
      loading: false,
      userInfo: null,
      pointsStats: null,
      pointsRecords: [],

      filterType: '',
      filterSource: '',
      pagination: {
        current: 1,
        size: 20,
        total: 0
      }
    }
  },
  computed: {
    filteredRecords() {
      let records = this.pointsRecords
      
      if (this.filterType) {
        records = records.filter(record => record.type === this.filterType)
      }
      
      if (this.filterSource) {
        records = records.filter(record => record.source === this.filterSource)
      }
      
      return records
    }
  },
  async created() {
    this.$nextTick(async () => {
      if (this.userId) {
        await this.fetchUserInfo()
        await this.fetchPointsStats()
        await this.fetchPointsRecords()

      }
    })
  },
  methods: {
    async fetchUserInfo() {
      try {
        // 这里应该调用后端API获取用户信息
        // const response = await this.$axios.get(`/v1/user/${this.userId}`)
        
        // 模拟数据
        this.userInfo = {
          id: this.userId,
          username: 'user' + this.userId,
          nickname: '用户' + this.userId,
          avatar: ''
        }
      } catch (error) {
        this.$message.error('获取用户信息失败')
        console.error(error)
      }
    },
    
    async fetchPointsStats() {
      try {
        // 这里应该调用后端API获取积分统计
        // const response = await this.$axios.get(`/v1/points/user/${this.userId}/stats`)
        
        // 模拟数据
        this.pointsStats = {
          currentPoints: 1500,
          totalEarned: 2000,
          totalUsed: 500,

        }
      } catch (error) {
        this.$message.error('获取积分统计失败')
        console.error(error)
      }
    },
    
    async fetchPointsRecords() {
      this.loading = true
      try {
        // 这里应该调用后端API获取积分记录
        // const response = await this.$axios.get(`/v1/points/user/${this.userId}/records`, {
        //   params: {
        //     page: this.pagination.current,
        //     count: this.pagination.size
        //   }
        // })
        
        // 模拟数据
        this.pointsRecords = [
          {
            id: 1,
            type: 'earned',
            points: 1000,
            title: '新用户注册奖励',
            description: '新用户注册获得1000积分',
            source: 'activity',
            balanceBefore: 0,
            balanceAfter: 1000,
            createTime: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
          },
          {
            id: 2,
            type: 'earned',
            points: 500,
            title: '购买商品获得积分',
            description: '消费500元获得500积分',
            source: 'purchase',
            balanceBefore: 1000,
            balanceAfter: 1500,
            createTime: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000)
          },
          {
            id: 3,
            type: 'used',
            points: 200,
            title: '积分抵扣',
            description: '订单抵扣200积分',
            source: 'exchange',
            balanceBefore: 1500,
            balanceAfter: 1300,

            createTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
          }
        ]
        
        this.pagination.total = this.pointsRecords.length
      } catch (error) {
        this.$message.error('获取积分记录失败')
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    

    
    refreshRecords() {
      this.fetchPointsRecords()
    },
    
    handleSizeChange(size) {
      this.pagination.size = size
      this.fetchPointsRecords()
    },
    
    handleCurrentChange(current) {
      this.pagination.current = current
      this.fetchPointsRecords()
    },
    
    back() {
      this.$emit('editClose')
    },
    
    formatDate(date) {
      if (!date) return '-'
      return new Date(date).toLocaleString()
    },
    
    getTypeTagType(type) {
      const typeMap = {
        earned: 'success',
        used: 'danger',

        adjusted: 'info'
      }
      return typeMap[type] || 'info'
    },
    
    getTypeLabel(type) {
      const labelMap = {
        earned: '获得',
        used: '使用',
        adjusted: '调整'
      }
      return labelMap[type] || type
    },
    
    getSourceLabel(source) {
      const sourceMap = {
        purchase: '购买',
        signin: '签到',
        activity: '活动',
        exchange: '兑换',
        admin: '管理员调整',

      }
      return sourceMap[source] || source
    },
    
    getPointsClass(type) {
      return type === 'used' ? 'points-negative' : 'points-positive'
    },
    

  }
}
</script>

<style scoped lang="scss">
.points-record-detail {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;

    .back {
      float: right;
      margin-right: 40px;
      cursor: pointer;
    }
  }

  .container {
    .wrap {
      padding: 20px;
    }
  }

  .user-info-card,
  .points-stats-card,
  .points-records-card,
  .expiring-points-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-actions {
        display: flex;
        align-items: center;
      }
    }
  }

  .info-item {
    display: flex;
    margin-bottom: 15px;
    
    label {
      font-weight: bold;
      color: #606266;
      width: 80px;
      margin-right: 10px;
    }
    
    span {
      color: #303133;
    }
  }

  .stats-item {
    text-align: center;
    
    .stats-number {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 8px;
      
      &.current {
        color: #409EFF;
      }
      
      &.earned {
        color: #67C23A;
      }
      
      &.used {
        color: #F56C6C;
      }
      

    }
    
    .stats-label {
      color: #606266;
      font-size: 14px;
    }
  }

  .points-positive {
    color: #67C23A;
    font-weight: bold;
  }

  .points-negative {
    color: #F56C6C;
    font-weight: bold;
  }

  .balance-before {
    color: #909399;
  }

  .balance-after {
    color: #409EFF;
    font-weight: bold;
  }



  .pagination-container {
    margin-top: 20px;
    text-align: right;
  }
}
</style>
